<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation>
        <div slot="right">
          <div>
            <el-select v-model="crud.query.phase" placeholder="诊疗阶段" style="width:200px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in dict.medical_phase" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input v-model="crud.query.clinicName" placeholder="诊所名称" style="width:200px;display:inline-block;margin: 3px"></el-input>
            <el-input v-model="crud.query.patientName" placeholder="患者姓名" style="width:200px;display:inline-block;margin: 3px"></el-input>
            <el-select v-model="crud.query.subOrderTreatStage" placeholder="订单类型" style="width:200px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in dict.sub_order_treat_stage" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-date-picker v-model="crud.query.expressDate" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width:200px;display:inline-block;margin: 3px" type="date" placeholder="快递时间"></el-date-picker>
          </div>
          <div>
            <el-input v-model="crud.query.doctorName" placeholder="主治医生" style="width:200px;display:inline-block;margin: 3px"></el-input>
            <el-input v-model="crud.query.patientId" placeholder="患者编号" style="width:200px;display:inline-block;margin: 3px"></el-input>
            <el-select v-model="crud.query.orderStat" placeholder="订单状态" style="width:200px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in dict.order_sub_stat" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="crud.query.prodoctId" placeholder="当前矫治器" style="width:200px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in allProduct" :key="index" :label="item.productName" :value="item.productName"></el-option>
            </el-select>
          </div>
        </div>
        <span slot="optsLeft">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
          <el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
          <el-button :loading="crud.downloadLoading" class="filter-item" size="mini" type="warning" icon="el-icon-download" @click="crud.doExport">导出</el-button>
        </span>
      </crudOperation>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="expressNo" width="150" sortable label="快递单号"></el-table-column>
        <el-table-column prop="express" width="150" sortable label="物流公司"></el-table-column>
        <el-table-column prop="expressStat" width="150" sortable label="物流状态">
          <template slot-scope="scope">
            {{ dict.label.express_stat[scope.row.expressStat] }}
          </template>
        </el-table-column>
        <el-table-column prop="expressDate" width="150" sortable label="快递时间"></el-table-column>
        <el-table-column width="150" sortable label="患者姓名">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="linkSearch('/oper/doctor',scope.row)">{{ scope.row.patient.patientName }}</a>
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="患者性别">
          <template slot-scope="scope">
            {{ dict.label.gender[scope.row.patient.gender] }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="患者编号">
          <template slot-scope="scope">
            {{ scope.row.patient.id }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="医生姓名">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="doctorDetail(scope.row)">{{ scope.row.doctor.doctorName }}</a>
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="病例编号">
          <template slot-scope="scope">
            {{ scope.row.medicalRecord.id }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="订单编号">
          <template slot-scope="scope">
            {{ scope.row.order.id }}
          </template>
        </el-table-column>
        <el-table-column width="150" prop="orderType" sortable label="订单类型"></el-table-column>
        <el-table-column width="150" sortable label="费用类型">
          <template slot-scope="scope">
            {{ dict.label.order_pay_flag[String( scope.row.orderSub.orderPayFlag )] }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="套餐名称">
          <template slot-scope="scope">
            {{ scope.row.medicalRecord.packageInfo.packageName }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="套餐状态">
          <template slot-scope="scope">
            {{ scope.row.packageStat }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="诊疗阶段">
          <template slot-scope="scope">
            {{ scope.row.medicalRecord.phase }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="当前矫治器">
          <template slot-scope="scope">
            {{ scope.row.medicalRecord.product.productName }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="收件人">
          <template slot-scope="scope">
            {{ scope.row.receiver.contact }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="联系电话">
          <template slot-scope="scope">
            {{ scope.row.receiver.mobile }}
          </template>
        </el-table-column>
        <el-table-column width="250" sortable label="收件地址">
          <template slot-scope="scope">
            {{ scope.row.receiver.address }}
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleOutput(scope.row)">出库单</el-button>
          </template>
        </!--> -->
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
  </div>
</template>

<script>
import { queryAll } from '@/api/product';
import CRUD, { presenter, header, form, crud } from '@crud/crud';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import { mapGetters } from 'vuex';
import { PROCESS_EN_TYPE } from '@/utils/index';

export default {
  name: 'Patient',
  components: { pagination, crudOperation },
  mixins: [presenter(), header(), crud()],
  dicts: [
    'medical_phase',  // 诊疗阶段
    'sub_order_treat_stage',  // 订单类型
    'order_sub_stat',  // 订单状态
    'order_pay_flag',  // 费用类型
    'bom_logistics_stat',  // 物流状态
    'gender',  // 患者性别
    'express_stat'  // 物流状态
  ],
  cruds() {
    return CRUD({
      title: '矫治器',
      url: '/base/logistics/query',
      serverPath: PROCESS_EN_TYPE.VUE_APP_LOG_API,
      query: {
        phase: "", // 诊疗阶段
        clinicName: "",  // 诊所名称
        patientName: "",  // 患者名称
        subOrderTreatStage: "",  // 订单类型
        expressDate: "", // 快递时间
        doctorName: "",  // 医生姓名
        patientId: "",  // 患者编号
        orderStat: "",  // 订单状态
        prodoctId: "",  // 当前矫治器
        serviceCode: "0000"  // 业务代码：0000 矫治器, 0001 牙模
      },
      sort: 'createDate',  //id,desc
      props: { searchToggle: false },
      optShow: { add: false, download: false, reset: true },
      optRightShow: {
        search: false,
        refresh: false
      }
    });
  },
  data() {
    return {
      allProduct: []
    };
  },
  computed: {
    ...mapGetters([
      'menusMap',
      'autoPath',
      'menusCode',
      'codes',
      'searchInfo'
    ])
  },
  watch: {},
  mounted() {
    this.getAllProduct();
    console.log("物流状态------",this.dict.bom_logistics_stat);
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    // 获取全部产品(矫治器数据)
    getAllProduct() {
      queryAll({}).then(res => {
        this.allProduct = res;
      });
    },
    // 链接跳转
    linkSearch(link, row) {
      alert('链接跳转查看详情----待开发');
    },
    // 医生详情
    doctorDetail(row) {
      alert('查看医生详情');
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .head-container {
    .top_btn{
      margin-bottom: 10px;
      .item {
        margin-top: 10px;
        margin-right: 30px;
      }
    }
    .search-tools {
      .tools-all {
        //   margin-top:10px;
        vertical-align: top;
      }
      .tools-right {
        display: inline-block;
        border-left: 1px solid #e6e6e6;
        padding-left: 10px;
        .tools-group {
          .group-btns {
            display: inline-block;
            margin-left: 30px;
            margin-bottom: 20px;
            .btn {
              margin-right: 30px;
            }
          }
        }
      }
    }
  }
}
.crud-opts{
  align-items: flex-end;
  .crud-opts-right{
    width: 200px;
  }
}
</style>
